<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入库单管理-v2</title>

</head>
<body>


<div id="app">


    <table>

        <thead>

        <tr>
            <th>
                编号
            </th>
            <th>
                商品名称
            </th>
            <th>
                入库数量
            </th>
            <th>
                入库日期
            </th>

        </tr>
        </thead>

        <tbody>
            <tr v-for="(item,index) in list">
                 <td>
                     {{index+1}}
                 </td>
                 <td>
<!-- 结构复杂    消解复杂度                 -->
                     {{item.product_name}}
                 </td>
                <td>
                    {{item.quantity}}
                </td>
                <td>
                    {{item.in_date}}

                </td>
            </tr>

        </tbody>
    </table>

</div>

</body>
<script src="../lib/vue.global.js"></script>
<script src="../lib/axios.js"></script>
<script>

    /*
     * const 定义常量  -- 常用
     * let   定义变量
     *
    * */
    const app = Vue.createApp({

        data() {

            return {
                list: []
            }

        },
        mounted() {

            axios({
                url: '../0.data/stockin_report.json',
                method: 'get',
                dataType: 'json'
            }).then((res) => {

                this.list = res.data;

            })

        }

    }).mount('#app')


</script>


</html>